<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <title>INSTAR-注册</title>
    <link rel="shortcut icon" href="../static/favicon.ico" type="image/x-icon">
</head>
<link rel="stylesheet" href="../static/css/login.css" th:href="@{/css/login.css}">
<link rel="stylesheet" href="../static/css/bootstrapValidator.css" th:href="@{/css/bootstrapValidator.css}">
<body>
<br><br><br><br>
<!--------------- 注册部分begin ------------------>
<section id="lk_login">
    <div class="container">
        <div class="row">

            <!--左半部分-->
            <div class="col-md-6 col-sm-12 justify-content-center align-self-center shadow rounded " >
                <form class=" mt-4" method="post" th:action="@{/register}">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" id="username" name="username" aria-describedby="usernamehelp" placeholder="Enter your username">
                        <small id="usernamehelp" class="form-text text-muted">用户名是您身份的标识，注册成功后无法再更改</small>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="text" class="form-control" id="email" name="email" placeholder="Email">
                    </div>
                    <button type="submit" class="btn btn-primary" id="register-btn">注册</button>
                </form>
                <div class="mb-4"><span>已有账号？</span><a href="/login" th:href="@{/login}">点我登录</a></div>
            </div>

            <!--右半部分-->
            <div class="col-md-6 col-sm-12 d-flex align-items-center justify-content-center shadow rounded bg_here">
                <div>
                    <h2 style="color: white">
                        欢迎注册
                    </h2>

                    <h3 style="color: white">INSTAR系统</h3>
                </div>
            </div>


        </div>
    </div>

</section>

<!--------------- 注册部分end ------------------>

<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="../static/js/jquery-3.3.1.js"></script>
<script src="../static/js/bootstrap.js"></script>
<!--/*/</th:block>/*/-->
<script src="../static/js/bootstrapValidator.js" th:src="@{/js/bootstrapValidator.js}"></script>

<!--用户输入的合法性检查-->
<script>
    $(document).ready(function() {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 4,
                            max: 18,
                            message: '用户名长度必须在4到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '用户名只能包含大写、小写、数字和下划线'
                        },
                        threshold: 4,//有4字符以上才发送ajax请求
                        remote: {//ajax验证
                            url: "http://"+HOST+"/isUsernameUnique",
                            message: '用户名已存在,请重新输入',
                            delay: 2000,//ajax刷新的时间是2秒一次
                            type: 'POST',
                            dataType: 'json'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '密码长度必须在6到18位之间'
                        },
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        emailAddress: {
                            message: '邮箱地址格式有误'
                        }
                    }
                }
            }
        });
    });

</script>





</body>
</html>